<template>
  <div class="app-container">
    <hq-searchDown ref="hqSearchDown" :select-opts="selectOpts" @click="handleFilter" />
    <div class="filter-container">
      <div>
        <span v-if="authorityHandle(112)" class="filter-title filter-item">身份所属</span>
        <k-select
          v-if="authorityHandle(112)"
          v-model="listQuery.userType"
          class="filter-item right-item"
          style="width:120px"
          :select-params="dict.type.IDENTITY_TYPE"
          @handleSelectEvent="$refs.hqSearchDown.searchFun()"
        />
        <span class="filter-title filter-item">箱子名称</span>
        <k-select
          v-model="listQuery.boxId"
          class="filter-item right-item"
          style="width:120px"
          :custom-params="{ opations: boxList, label: 'lineName', value: 'lineId' }"
          @handleSelectEvent="$refs.hqSearchDown.searchFun()"
        />
        <span class="filter-title filter-item">开箱方式</span>
        <k-select
          v-model="listQuery.openType"
          class="filter-item right-item"
          style="width:120px"
          :custom-params="{ opations: openWayList, label: 'lineName', value: 'lineId' }"
          @handleSelectEvent="$refs.hqSearchDown.searchFun()"
        />
        <span v-if="authorityHandle(1)" class="filter-title filter-item">用户通道</span>
        <k-select
          v-if="authorityHandle(1)"
          v-model="listQuery.probability"
          class="filter-item right-item"
          style="width:120px"
          :select-params="dict.type.USER_CHANNEL"
          @handleSelectEvent="$refs.hqSearchDown.searchFun()"
        />
        <span v-if="authorityHandle(1)" class="filter-title filter-item">开箱阶段</span>
        <k-select
          v-if="authorityHandle(1)"
          v-model="listQuery.stage"
          class="filter-item right-item"
          style="width:120px"
          :select-params="[{ label: '无', value: 4 }, { label: '1', value: 0 }, { label: '2', value: 1 }, { label: '3', value: 2 }]"
          @handleSelectEvent="$refs.hqSearchDown.searchFun()"
        />
        <span class="filter-title filter-item">开箱时间</span>
        <k-date-picker v-model="timeValue" class="filter-item" @hqchang="$refs.hqSearchDown.searchFun()" />
      </div>
    </div>

    <!-- -->
    <!--表格相关 -->
    <el-table
      ref="multipleTable"
      :data="listData"
      fit
      border
      :show-summary="authorityHandle(207)"
      :summary-method="getSummaries"
      highlight-current-row
      style="width: 100%; border-radius: 8px; margin-top: 80px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
    >
      <el-table-column width="60px" type="index" label="序号" align="center" />
      <el-table-column show-overflow-tooltip prop="mobile" min-width="100px" label="用户名" align="center" />
      <el-table-column show-overflow-tooltip prop="userType" min-width="100px" label="身份所属" align="center" />
      <el-table-column show-overflow-tooltip prop="boxName" min-width="100px" label="箱子名称" align="center" />
      <el-table-column v-if="authorityHandle(1)" show-overflow-tooltip prop="caseProbability" min-width="80px" label="用户通道" align="center" />
      <el-table-column v-if="authorityHandle(1)" show-overflow-tooltip prop="stage" min-width="80px" label="开箱阶段" align="center" />
      <el-table-column show-overflow-tooltip prop="boxPrice" min-width="80px" label="箱子价值(R)" align="center" />

      <el-table-column show-overflow-tooltip prop="goodsNames" min-width="100px" label="开箱获得" align="center" />
      <el-table-column show-overflow-tooltip prop="openPrice" min-width="80px" label="饰品价值(R)" align="center" />
      <el-table-column show-overflow-tooltip prop="openType" min-width="80px" label="开箱方式" align="center" />
      <!-- <el-table-column show-overflow-tooltip prop="ammo" min-width="80px" label="晶粹获得" align="center" /> -->
      <el-table-column show-overflow-tooltip prop="openTime" min-width="80px" label="开箱时间" align="center" />
      <el-table-column show-overflow-tooltip prop="roomId" min-width="80px" label="房间ID" align="center" />
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="$refs.hqSearchDown.searchFun(1)"
    />
  </div>
</template>

<script>
import { playOutListPlayOutData, getOpenWayList, getOpenTypeList, playOutGetBoxList, playoutSumPrice } from '@/api/data/data'
import Pagination from '@/components/Pagination'
import hqSearchDown from '@/components/hqSearchDown' // 下拉搜索
export default {
  components: { Pagination, hqSearchDown },
  dicts: ['USER_CHANNEL', 'IDENTITY_TYPE'],
  data() {
    return {
      // 下拉搜索项0
      selectOpts: [
        {
          label: '用户名',
          rigth: true,
          value: 'mobile'
        },
        {
          label: '房间ID',
          num: true,
          value: 'roomId'
        }
      ],
      listData: [],
      openWayList: [],
      openTypeList: [],
      boxList: [],
      timeValue: '',
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        probability: '',
        direction: '', // 排序 正向(asc)逆向(desc),
        userType: undefined, // 用户类型",
        boxType: undefined, // 开箱玩法",
        boxId: undefined, // 箱子id",
        openType: undefined, // 开箱方式",
        startTime: '', // 开始时间",
        endTime: '', // 结束时间",
        key: '' // 饰品名称'
      },
      // 箱子价值
      box_price: null,
      open_price: null,
      ammo: null,
      paramData: {}
    }
  },
  watch: {
    // 时间赋值
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    }
  },
  created() {
    this.loadData()
    this.getOpenWayList()
    this.getOpenTypeList()
    this.tableDate()
  },

  methods: {
    /** 获取列表 */
    loadData(v) {
      this.paramData = {}
      this.paramData = { ...v, ...this.listQuery }
      playOutListPlayOutData(this.paramData).then(res => {
        const data = res.data
        this.listData = data.rows
        this.totalRows = data.totalRows
      })
    },
    getOpenWayList() {
      getOpenWayList().then(res => {
        this.openWayList = res.data
      })
    },
    getOpenTypeList() {
      getOpenTypeList().then(res => {
        this.openTypeList = res.data
      })
      playOutGetBoxList({ type: 0 }).then(res => {
        this.boxList = res.data
      })
    },
    // 搜索查询事件
    handleFilter(v, type) {
      if (type !== 1) this.listQuery.pager.pageNo = 1
      this.box_price = null
      this.open_price = null
      this.card_price = null
      this.ammo = null
      this.tableDate()
      this.loadData(v)
    },
    tableDate() {
      if (!this.authorityHandle(207)) return
      this.$nextTick(() => {
        const html6 = this.$refs.multipleTable.$refs.footerWrapper
          .querySelector('.el-table__footer')
          .querySelectorAll('td')[this.authorityHandle(1) ? 6 : 4]
          .querySelector('.cell')
        html6.innerHTML = `${this.box_price != null ? this.box_price : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html6.onclick = () => {
          playoutSumPrice({ field: 'box_price', ...this.paramData }).then(res => {
            this.box_price = res.data
            this.tableDate()
          })
        }
        const html8 = this.$refs.multipleTable.$refs.footerWrapper
          .querySelector('.el-table__footer')
          .querySelectorAll('td')[this.authorityHandle(1) ? 8 : 6]
          .querySelector('.cell')
        html8.innerHTML = `${this.open_price != null ? this.open_price : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html8.onclick = () => {
          playoutSumPrice({ field: 'open_price', ...this.paramData }).then(res => {
            this.open_price = res.data
            this.tableDate()
          })
        }
        const html10 = this.$refs.multipleTable.$refs.footerWrapper
          .querySelector('.el-table__footer')
          .querySelectorAll('td')[this.authorityHandle(1) ? 10 : 8]
          .querySelector('.cell')
        html10.innerHTML = `${this.ammo != null ? this.ammo : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html10.onclick = () => {
          playoutSumPrice({ field: 'ammo', ...this.paramData }).then(res => {
            this.ammo = res.data
            this.tableDate()
          })
        }
      })
    },
    getSummaries(param) {
      const { columns } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) sums[index] = '合计'
        else if (column.property === 'boxPrice') {
          sums[index] = ''
        } else if (column.property === 'goodsPrice') {
          sums[index] = ''
        } else if (column.property === 'ammo') {
          sums[index] = ''
        }
      })
      return sums
    }
  }
}
</script>
<style lang="scss" scoped>
.filter-container {
	width: 100%;
	height: 48px;
	line-height: 48px;

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
	}

	.kInput {
		position: absolute;
		right: 20px;
	}

	.filter-title {
		height: 48px;
		line-height: 48px;
		font-size: 16px;
		font-weight: 500;
		margin-right: 22px;
		color: #14162e;
	}

	.right-item {
		margin-right: 10px;
	}
}
</style>
